<template>
  <div id="message">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="navbar" @click-left="onClickLeft" fixed>
      <template #left>
        <van-icon class="navLeft" name="arrow-left" />
      </template>
      <template #title>
        <div class="navTitle">消息</div>
      </template>
    </van-nav-bar>
    <div class="container">
      <!-- 顶部标签选择 active 1是通知 2是私信 -->
      <van-tabs v-model="active" animated swipeable sticky offset-top="46" color="#66cd99" title-active-color="black">
        <!-- 通知的内容 -->
        <van-tab title="通知">
          <message-list v-for="(items,index) in informList" :key="index" :message="items" @click.native="informClick(items.message)"></message-list>
        </van-tab>
        <!-- 私信的内容 -->
        <van-tab title="私信">
          <message-list v-for="(items,index) in chatList" :key="index" :message="items"  @click.native="chatClick(items.name)"></message-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import MessageList from '../../components/MessageList'
import {Toast} from 'vant';
export default {
  name: 'Message',
  components: {
    MessageList
  },
  data () {
    return {
      // 存放通知的消息列表
      informList: [
        {
          name: 'aaa',
          time: '2020-11-11 00:00:00',
          content: '你的任务已退款'
        },
        
      ],
      // 存放私聊的消息列表
      chatList: [
      ],
      active:1,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
       this.logout();
    },
    chatClick(name) {
      this.$router.push({path:'/chat',query:{name:name}})
       this.logout();
    },
     informClick(name) {
       if(name.order_id){
        this.$router.push({path:'/finisheddetails',query:{id:name.order_id}})
        this.logout();
       }
    },
    conversationList(){
      // 拉取会话列表

      let promise = this.tim.getConversationList();
      promise.then((imResponse)=> {
        const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
        console.log(conversationList);
        console.log(conversationList[1].lastMessage.lastTime);
        for(var e in conversationList){
          console.log(e);
          const listText =conversationList[e].lastMessage.messageForShow;
          const listTime = this.moment(conversationList[e].lastMessage.lastTime*1000).format('YYYY/MM/DD hh:mm:ss');
          this.find(conversationList[e].userProfile.userID,e,listText,listTime);
        }
        console.log(this.moment(conversationList[e].lastMessage.lastTime*1000).format('YYYY/MM/DD hh:mm:ss'));
        this.conversationProfile();
      }).catch(function(imError) {
        console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
      });
    },
    conversationProfile(){
      let promise = this.tim.getConversationProfile("C2Cljydq123");
      promise.then(function(imResponse) {
        // 获取成功
        console.log(imResponse.data.conversation); // 会话资料
      }).catch(function(imError) {
        console.warn('getConversationProfile error:', imError); // 获取会话资料失败的相关信息
      });
    },
     login(){
            let promise = this.tim.login({userID: localStorage.userid, userSig: localStorage.usersig});
            console.log(promise);
            promise.then(function(imResponse) {
            console.log(imResponse.data); // 登录成功
            }).catch(function(imError) {
            console.warn('login error:', imError); // 登录失败的相关信息
            });
        },
        logout(){
            let promise = this.tim.logout();
            promise.then(function(imResponse) {
            console.log(imResponse.data); // 登出成功
            }).catch(function(imError) {
            console.warn('logout error:', imError);
            });
        },
        find(user,id,listText,listTime){
          let params = new URLSearchParams();
          params.append('name',user)
          this.axios({
          method: "get",
          url: this.$store.state.url+"/order/user/orderuser",
          headers:{
           'Authorization': localStorage.token
                },
          params
        }).then((res) => {
             var item={
               content:'',
               time:'',
               img:"",
               name:''
             };
             if(res.data.data){
              item.content = listText;
              item.time = listTime;
              item.img = "http://picture.105577.xyz/"+res.data.data.img;
              item.name = res.data.data.name;
              this.chatList.push(item);
              Toast.success('加载完成');
              Toast.clear();       
             }
        })
        },
        inform(){
          this.axios({
          method: "get",
          url: this.$store.state.url+"/auth/user/notification",
           headers:{
           'Authorization': localStorage.token
                }
        }).then((res) => {
          console.log(res.data.data);
          for(var a in res.data.data){
            res.data.data[a].name = res.data.data[a].message.title;
            res.data.data[a].content = res.data.data[a].message.content;
            res.data.data[a].time = res.data.data[a].created_at;
          }
            this.informList= res.data.data;
        }).catch((err) => {
            console.log(err);
        })
        },
  },
  created(){
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
    });
    this.login();
    this.inform();
    this.tim.on(this.TIM.EVENT.SDK_READY, this.conversationList);
  }, 
  mounted() {
  },

}
</script>

<style scoped>
  #message {
    background: #fff;
  }
  .navbar {
    background: #66cd99;
    box-shadow: 0 0px 5px #9ad5a7;
    color: #9ad5a7;
    width: 100%;
  }
  .navLeft {
    size: 20px;
    color: #fff
  }
  .navTitle {
    color: #fff;
    font-size: 20px
  }
  .container {
    padding-top: 46px
  }
</style>